<template>
	<view class='radarContainer'>
	<canvas class='radarCanvas' canvas-id='radarCanvas'></canvas>
	</view>
</template>

<script>
	var numCount = 8;  //元素个数
	var numSlot = 5;  //一条线上的总节点数
	var mW = 350;  //Canvas的宽度
	var mCenter = mW / 2; //中心点
	var mAngle = Math.PI * 2 / numCount; //角度
	var mRadius = mCenter - 80; //半径(减去的值用于给绘制的文本留空间)
	var radCtx = uni.createCanvasContext("radarCanvas")//获取指定的Canvas
	export default {
		data() {
			return {
			}
		},
		onLoad(options) {
					var chanelArray1= [["本人作用", 50], ["难易程度", 70], ["工作质量", 50], ["任务数量", 100], ["出勤情况", 56], ["廉洁自律", 90], ["工作作风", 95], ["政治思想", 50]]
					this.setData({
						chanelArray1:chanelArray1
					})
					this.drawRadar()
		},
		onShow() {
		},
		methods: {
			// 雷达图
				drawRadar: function () {
					var sourceData1 = this.data.chanelArray1
					// var sourceData2 = this.data.chanelArray2
					// var sourceData3 = this.data.chanelArray3
					//调用
					this.drawEdge() //画六边形
					// this.drawArcEdge() //画圆
					this.drawLinePoint()
					//设置数据
					this.drawRegion(sourceData1, 'rgba(193,229,253, 0.7)') //第一个人的
					// this.drawRegion(sourceData2, 'rgba(255, 200, 0, 0.5)') //第二个人
					// this.drawRegion(sourceData3, 'rgba(122, 202, 254, 0.5)') //第三个人
					//设置文本数据
					this.drawTextCans(sourceData1)
					//设置节点
					this.drawCircle(sourceData1, '#3A95FE')
					// this.drawCircle(sourceData2, 'yellow')
					//开始绘制
					radCtx.draw()
				},
				// 绘制6条边
				drawEdge: function () {
					radCtx.setStrokeStyle("#E1B5C4")
					radCtx.setLineWidth(2)  //设置线宽
					for (var i = 0; i < numSlot; i++) {
						//计算半径
						radCtx.beginPath()
						var rdius = mRadius / numSlot * (i + 1)
						//画6条线段
						for (var j = 0; j < numCount; j++) {
							//坐标
							var x = mCenter + rdius * Math.cos(mAngle * j);
							var y = mCenter + rdius * Math.sin(mAngle * j);
							radCtx.lineTo(x, y);
						}
						radCtx.closePath()
						radCtx.stroke()
					}
				},
				// / 第一步：绘制6个圆，可以通过修改numSlot的数的大小，来确定绘制几个圆
				drawArcEdge: function () {
					radCtx.setStrokeStyle("#E1B5C4")
					radCtx.setLineWidth(2)  //设置线宽
					for (var i = 0; i < numSlot; i++) {
						//计算半径
						radCtx.beginPath()
						var rdius = mRadius / numSlot * (i + 1)
						//画6条线段
						for (var j = 0; j < numSlot; j++) {
							// //计算半径
							radCtx.beginPath()
							var rdius = mRadius / numSlot * (i + 1)  //计算每个圆的半径
							radCtx.arc(mCenter, mCenter, rdius, 0, 2 * Math.PI) //开始画圆
							// radCtx.stroke()
						}
						radCtx.closePath()
						radCtx.stroke()
					}
				},
			
				// 绘制连接点
				drawLinePoint: function () {
					radCtx.beginPath();
					for (var k = 0; k < numCount; k++) {
						var x = mCenter + mRadius * Math.cos(mAngle * k);
						var y = mCenter + mRadius * Math.sin(mAngle * k);
			
						radCtx.moveTo(mCenter, mCenter);
						radCtx.lineTo(x, y);
					}
					radCtx.stroke();
				},
				//绘制数据区域(数据和填充颜色)
				drawRegion: function (mData, color) {
			
					radCtx.beginPath();
					for (var m = 0; m < numCount; m++) {
						var x = mCenter + mRadius * Math.cos(mAngle * m) * mData[m][1] / 100;
						var y = mCenter + mRadius * Math.sin(mAngle * m) * mData[m][1] / 100;
			
						radCtx.lineTo(x, y);
					}
					radCtx.closePath();
					radCtx.setFillStyle(color)
					radCtx.fill();
				},
			
				// //绘制文字
				drawTextCans: function (mData) {
			
					radCtx.setFillStyle("")
					radCtx.font = 'bold 17px cursive'  //设置字体
					for (var n = 0; n < numCount; n++) {
						var x = mCenter + mRadius * Math.cos(mAngle * n);
						var y = mCenter + mRadius * Math.sin(mAngle * n);
						// radCtx.fillText(mData[n][0], x, y);
						//通过不同的位置，调整文本的显示位置
						if (mAngle * n >= 0 && mAngle * n <= Math.PI / 2) {
							radCtx.fillText(mData[n][0], x + 5, y + 5);
						} else if (mAngle * n > Math.PI / 2 && mAngle * n <= Math.PI) {
							radCtx.fillText(mData[n][0], x - radCtx.measureText(mData[n][0]).width - 7, y + 5);
						} else if (mAngle * n > Math.PI && mAngle * n <= Math.PI * 3 / 2) {
							radCtx.fillText(mData[n][0], x - radCtx.measureText(mData[n][0]).width - 5, y);
						} else {
							radCtx.fillText(mData[n][0], x + 7, y + 2);
						}
			
					}
				},
				//画点
				drawCircle: function (mData, color) {
					var r = 3; //设置节点小圆点的半径
					for (var i = 0; i < numCount; i++) {
						var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
						var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
						radCtx.beginPath();
						radCtx.arc(x, y, r, 0, Math.PI * 2);
						radCtx.fillStyle = color;
						radCtx.fill();
					}
				},
		}
	}
</script>

<style>
	.radarContainer {
		/* background: #ffffff; */
		width: 100%;
		height: 420px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	.radarCanvas {
		width: 350px;
		height: 400px;
		margin: 0 auto;
		position: absolute;
	}
</style>
